<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2>Promise.all和Promise.race结合接口</h2>
    <script>
      function myAxios(option) {
        // 获取传入的属性
        const { url, method = 'get', data } = option
        return new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest()
          // 调用 新闻接口
          xhr.open(method, url)
          // 设置 请求头 内容格式为JSON
          xhr.setRequestHeader('content-type', 'application/json')
          xhr.addEventListener('load', function () {
            // console.log('load:', xhr.response)
            // 通过 resolve 将成功的结果传递给then
            resolve(xhr.response)
          })
          // 发送  JSON
          xhr.send(JSON.stringify(data))
        })
      }

      // 1.测试多个接口
      // 新闻 图书接口 英雄接口
      const newP = myAxios({
        url: 'http://ajax-api.itheima.net/api/news',
        method: 'get',
      })
      const bookP = myAxios({
        url: 'http://ajax-api.itheima.net/api/books',
        method: 'get',
      })
      // const heroP = myAxios({
      //   url: 'https://autumnfish.cn/api/lol/search?q=金克丝',
      //   method: 'get',
      // })
      // 等待所有
      Promise.all([newP, bookP]).then((res) => {
        console.log('res:', res)
      })

      // 等待第一个
      Promise.race([newP, bookP]).then((res) => {
        console.log('res:', res)
      })

      /*
        1. 所有Promise中的异步代码都会执行
        2. 根据all/race 获取所有或第一个
      */
    </script>
  </body>
</html>
